Mapping with App Inventor dedicated components

Durée estimée: 45 minutes

Presentation :

App Inventor has introduced powerful and interactive mapping tools that handle map items as objects. The map now becomes a smart map that can hold multiple layers with a raster background and vector objects (or features) overlaid on it. Each map object has its own properties and can be handled for itself : clicked for queries, moved or dragged to an other location, etc.

They bring us close to the GIS technology (Geographic Informations Systems) which is the professional approach to geospatial data management. Through the GeoJSON format, they open our apps to data exchange with thousands of geospatial databases and tens of thousands of open data sets (~1000 geodatasets for the Paris area, ... check for open geographic data around where you live!)

As a cherry on the cake, these components use Open Street Maps which is a worlwide open data initiative that might be the only alternative to Google servers. You might well become an OSM contributor yourself, sometime!

As a temporary drawback all functions are not fully working yet, and - as we write these lines - we recommend to stick with markers or point features (and keep line and area features for some time later). But that's quite enough to become familiar with this object oriented technology that handles raster map layers as well as vector objects.

Where do these components stand with regards to other mapping techniques?

We have seen different mapping solutions in other lessons of this course : with a webviewer, with start activity, with fusion tables and with static maps

  • mapping with a webviewer is the easiest and enables interactive display, but your app does not see map events (clicks, ...) and there is no data feedback (or very little): this is a good "map output only" solution.
  • mapping with start activity is similar : your app loses control to an other app (that runs on your phone). It brings more complexity, may be with a few more functions (I don't like it, it's too difficult to explain).
  • mapping with static maps (usually Google API) displays maps as the backround image of a canvas. This keeps full app control on events, including clicks, sprite collisions, ... It's one of my favorites. The problem is that you need to write all the code, including coordinate conversions from pixels to meters and degrees of latitude and longitude.
  • mapping with fusion tables uses a webviewer (as for the first case) but with a powerful server that cnnects mapping functions and data management (SQL like). That means you can click on objects to display their properties, but cannot drag objects nor catch click events from your app. Map interactions stay on the server side.

So where are we with the App Inventor mapping components ? somewhere between mapping with static maps in a canvas and mapping with fusions tables.

  • We keep a high level of interactions within the app (clic, long clic, drag, ... objects) as is the case with static maps :
    • what we loose are the sprites and balls, real time move and their collisions,
    • what we gain is huge : sructured data management in the geographic space.
  • We get a new level data management
    • user handles data in the geographic space (not in screen pixel space), with embedded functions to zoom and pan,
    • data are handled as geographic objects (features) with geometric properties (point, lines, areas, ...) and semantic or descriptive properties. This enables high level exchanges (feature, or feature collection level) with geographic databases, using the GeoJSON format
    • there is at least one level of abstration above the sanvas/staticmaps approach,
    • processing is done "locally" i.e. on the smartphone, which means less dependency on internet and servers,
    • However, there is no database management functions, as is the case with fusion tables. Apps will need to use a local or network database.

Last but not least, if you intend to become a high level user of geographic data this will teach you basics that are shared by geoData/GIS professionals.

What you will do :

Use App Inventor mapping components to
  • display a map, pan and zoom
  • Create, display, update, delete geolocated markers,
  • query marker properties.
We will do this with different versions :
versionressource linkDescription
V1with version 1 you will create a map, then several markers with a name and adress. Name will be used as the marker's title and adress as the marker's description. Adress will also be used to compute initial marker's location
V2
V3

What you will learn :

Build and handle maps and map features as objects.

Input Ressources :

see ressource link in above table

Lesson content :

Design and selection of components : App V1

Component Category Name Role
Sreen1 main screen / top component.
  • appName : mapTest1
  • sizing : fixed
  • screen orientation : portait
Vertical
Arrangement
Layout ArgtVertSaisieMarker Embeds horizontal arrangements for pseudo (name)an address.
  • Hauteur : automatique
  • Largeur : remplir parent
Horizontal
Arrangement
Layout ArgtHorPseudo Embeds textbox and button for voic recognition of marker's pseudo(or name)
  • Hauteur : automatique
  • Largeur : remplir parent
Text box Interface utilisateur ZoneTextePseudo Zone de texte dans laquelle on va afficher le pseudo (name) du marker.
  • Hauteur : automatique
  • Largeur : remplir parent
Bouton Interface utilisateur BoutonRecoPseudo Bouton de lancement d’écoute et reconnaissance du pseudo (name)
  • Hauteur : automatique
  • Largeur : automatique
  • Image : microphone icon
Horizontal
Arrangement
Layout ArgtHorAdresse Embeds textbox and button for voice recognition of marker's address
  • Hauteur : automatique
  • Largeur : remplir parent
Text box Interface utilisateur ZoneTexteAdresse Zone de texte dans laquelle on va afficher et permettre d’éditer l’adresse dictée.
  • Hauteur : automatique
  • Largeur : remplir parent
Bouton Interface utilisateur BoutonRecoAdresse Bouton de lancement d’écoute et reconnaissance de l'adresse
  • Hauteur : automatique
  • Largeur : automatique
  • Image : microphone icon
  • Visible : non
Ce bouton n'est pas utilisé dans cette verion et reste invisible
map Maps ArgtHorPseudo Embeds textbox and button for voic recognition of marker's pseudo(or name)
  • Hauteur : automatique
  • Largeur : remplir parent
Zone de texte Interface utilisateur ZoneTexteAdresse Zone de texte dans laquelle on va afficher et permettre d’éditer l’adresse dictée.
  • Hauteur : automatique
  • Largeur : remplir parent
Bouton Interface utilisateur BoutonRecoAdresse Bouton de lancement d’écoute et reconnaissance de l’adresse dictée par l’utilisateur
  • Hauteur : automatique
  • Largeur : automatique
  • : Texte : Go
Cadre Interface utilisateur CadreCarte Cadre dans lequel la carte (dans un format image) sera affichée
  • Hauteur : remplir parent
  • Largeur : remplir parent
Notificateur Interface utilisateur Notificateur1 Composant permettant d’afficher des messages.
(Il ne sera pas utilisé dans l’application elle–même, mais c’est un composant dont on a presque toujours besoin, en particulier dans la phase de débogage de l’application.
Reconnaissance vocale Media RecoVocale Composant utilisé pour traduire en texte, l’adresse dictée par l’utilisateur.
Capteur
Position
Capteurs CapteurPosition Composant de géolocalisation dont la configuration doit être vérifiée sur votre téléphone (cf. Paramètres/Localisation).

Pour les essais l’intérieur, passez en mode "économie de batterie" qui correspond au mode "network"

Intervalle de distance : 10 (m)

Intervalle de temps : 60000 (ms)

Web Connectivité Web1 Composant (non visible) utilisé ici pour encoder l’adresse en URL avec la fonction : encoder URI

Ce composant n’est PAS utilisé pour récupérer la carte par son URL, car c et URL est utilisé directement comme un nom de fichier.

Quiz / auto control:

à compléter ou supprimer

Extensions and portfolio

à compléter ou supprimer